import React, {useState} from "react";
import {FileInfo} from "../../domain";
import {Popover, Space} from "antd";


const FileCmpt: React.FC<FileInfo> = (fileInfo: FileInfo) => {


    const [open, setOpen] = useState(false);

    const hide = () => {
        setOpen(false);
    };

    const handleOpenChange = (newOpen: boolean) => {
        setOpen(newOpen);
    };

    return (
        <>
            <Space direction="vertical" size="small" style={{display: 'flex', marginBottom: "1rem"}}>

                <Popover
                    content={<a onClick={hide}>Close</a>}
                    trigger="click"
                    open={open}
                    onOpenChange={handleOpenChange}
                >
                    <div style={{
                        marginLeft: "4rem",
                        width: "max-content",
                        maxWidth: "100%",
                        padding: "0.5rem 0.5rem",
                        boxShadow: "2px 2px 10px 1px rgb(100,100,100)",
                        borderRadius: "0.3rem",
                    }}>
                        {fileInfo.fileName}

                    </div>
                </Popover>
            </Space>
        </>

    )

}
export default FileCmpt;